<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兼容IE8的jQuery幻灯片切换代码 - 站长素材</title>


<style type="text/css">
	.poster-main{
		position: relative;
		margin: 50px auto;
	}
	.poster-main .poster-list .poster-item{
		position: absolute;
		left: 0;
		top: 0;
	}
	.poster-main .poster-btn{
		position: absolute;
		top: 0;
		cursor: pointer;
	}
	.poster-main .poster-prev-btn{
		left: 0;
		background: url("images/btn_l.png") no-repeat center center;
	}
	.poster-main .poster-next-btn{
		right: 0;
		background: url("images/btn_r.png") no-repeat center center;
	}
</style>

</head>
<body>
<div class="poster-main" id="carousel" data-setting='{
					"width":1000,
					"height":300,
					"posterWidth":600,
					"posterHeight":300,
					"scale":0.8,
					"speed":1000,
					"autoPlay":true,
					"delay":3000,
					"verticalAlign":"middle"
					}'> 
	   <div class="poster-btn poster-prev-btn"></div> 
	   <ul class="poster-list"> 
		<li class="poster-item"><a href="#"><img src="images/1.jpg" alt="" width="100%" /></a></li> 
		<li class="poster-item"><a href="#"><img src="images/2.jpg" alt="" width="100%" /></a></li> 
		<li class="poster-item"><a href="#"><img src="images/3.jpg" alt="" width="100%" /></a></li> 
	   </ul> 
	   <div class="poster-btn poster-next-btn"></div> 
  </div> 

<script src="js/Carousel.js"></script> 
<script type="text/javascript">
	$(function(){
		Carousel.init($("#carousel"));
		$("#carousel").init();
	});
</script>
</body>
</html>